<template>
  <div class="plugin-add">
    <!-- 头部 -->
    <div class="header-flex">
      <je-button type="text" @click="operateButton('add')"
        ><i class="fal fa-save"></i>添加</je-button
      >
      <je-button type="text" @click="operateButton('save')"
        ><i class="fal fa-save"></i>保存</je-button
      >
      <je-button type="text" @click="operateButton('delete')"
        ><i class="fal fa-save"></i>删除</je-button
      >
    </div>
    <je-table
      ref="xTable"
      border
      show-overflow
      :data="columnData"
      auto-resize
      resizable
      class="table-height"
      :scroll-y="{ mode: 'wheel' }"
      size="mini"
    >
      <je-column type="checkbox" width="40"></je-column>

      <je-column field="CONFIG_TYPE" title="类型" :edit-render="{ name: 'input' }"></je-column>
      <je-column field="SY_STATUS" title="启用">
        <template #default="{ row }">
          <span>{{ formatStatus(row.SY_STATUS) }}</span>
        </template>
      </je-column>
      <je-column title="配置项">
        <template #default="{ row }">
          <je-button type="link" @click="clickEvent(row)">编辑配置项</je-button>
        </template>
      </je-column>
      <je-column field="CONFIG_BZ" title="备注" :edit-render="{ name: 'input' }"></je-column>
    </je-table>
  </div>
</template>

<script>
  import { onMounted, ref, defineComponent, reactive, computed } from 'vue';
  import { Button } from 'ant-design-vue';
  import { Grid, Modal } from '@jecloud/ui';
  import {
    GetPluginData,
    AddPluginDoSave,
    RemovePluginData,
    GetPluginItemConfig,
  } from './../../api/index';

  export default defineComponent({
    name: 'PluginAdd',
    components: {
      JeButton: Button,
      JeTable: Grid,
      JeColumn: Grid.Column,
    },
    props: {},
    emits: [],
    setup(props, { emit }) {
      //  初始化数据
      let columnData = ref([
        {
          CONFIG_BZ: '',
          SY_STATUS: '1',
          CONFIG_TYPE: '',
        },
      ]);
      // 表格
      const xTable = ref({});
      const methods = {
        // 获取页面的初始数据
        getInitPluginData() {
          const params = {
            funcId: 'Q8h4WxeqJoqac0SXg2g',
            funcCode: 'JE_CORE_COMMJS',
          };
          GetPluginData(params)
            .then((res) => {
              columnData.value = res;
            })
            .catch((err) => {
              console.log('error', err);
            });
        },
        // 点header头部的按钮
        operateButton(type) {
          // 点击添加
          if (type == 'add') {
            // 点击添加，将值传过去。这边还需要TODO
            const params = {
              tableCode: 'JE_CORE_FUNC_CONFIG',
              CONFIG_TYPE: '',
              SY_STATUS: '1',
              CONFIG_DATA: '',
              CONFIG_FUNCCODE: 'JE_CORE_COMMJS',
              JE_CORE_FUNCINFO_ID: 'Q8h4WxeqJoqac0SXg2g',
              CONFIG_TABLENAME: 'JE_CORE_COMMJS',
            };
            AddPluginDoSave(params)
              .then((res) => {
                Modal.message(res.message, 'success');
                // 重新获取一下数据
                methods.getInitPluginData();
              })
              .catch((err) => {
                Modal.notice(err.message, 'error');
              });
          }
          // 点击删除 ids 需要从选中的数据中获取
          if (type == 'delete') {
            const params = {
              tableCode: 'JE_CORE_FUNC_CONFIG',
              ids: 'CA2f7GJg0a01FRWrTud,f9bNoeDdLAtdz1s0En7',
            };
            RemovePluginData(params)
              .then((res) => {
                Modal.message(res.message, 'success');
                // 重新获取一下数据
                methods.getInitPluginData();
              })
              .catch((err) => {
                Modal.notice(err.message, 'error');
              });
          }
          // $table.insertAt(record);
          // .then(({ row }) => this.$refs.xTable.setActiveCell(row, "sex"));--

          // await $table.setActiveCell(newRow, 'name');
          if (type == 'save') {
            Modal.message('点击保存TODO', 'success');
          }
        },
        formatStatus(value) {
          if (value === '1') {
            return '启用';
          }
          if (value === '0') {
            return '禁用';
          }
          return '';
        },
        // 点击编辑配置项的时候弹窗
        clickEvent(row) {
          // 1.判断是否为空
          // 2.是否重复添加
          // 3.调取je/develop/funcInfo/loadFunc的接口获取弹窗数据
          const params = {
            tableCode: 'JE_CORE_RESOURCECOLUMN',
            limit: -1,
            j_query: JSON.stringify({
              custom: [
                {
                  code: 'RESOURCECOLUMN_FUNCINFO_ID',
                  value: row.RESOURCECOLUMN_FUNCINFO_ID,
                  type: '=',
                  cn: 'and',
                },
                {
                  code: 'RESOURCECOLUMN_XTYPE',
                  value: ['uxcolumn', 'uxcheckcolumn'],
                  type: 'in',
                  cn: 'and',
                },
              ],
              order: [{ code: 'SY_ORDERINDEX', type: 'ASC' }],
            }),
            funcId: row.RESOURCECOLUMN_FUNCINFO_ID,
          };
          GetPluginItemConfig(params).then((res) => {
            Modal.notice('弹窗出现,数据已经获取', 'success');
          });
        },
      };
      onMounted(() => {
        methods.getInitPluginData();
      });
      return { columnData, ...methods, xTable };
    },
  });
</script>
<style lang="less">
  .plugin-add {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    .header-flex {
      height: 40px;
      line-height: 40px;
      background: #f7f9fc;
      // border-bottom: 1px solid #f0f0f0;
    }
    .table-height {
      .vxe-table--body-wrapper {
        height: calc(100vh - 350px);
        overflow-y: scroll;
      }
    }
  }
</style>
